<template>
  <div>
    <el-row :gutter="24">
      <el-col :lg="16">
        <div class="chart-wrapper">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>消息提醒</span>
            </div>
            <div class="component-item">
              <el-table :data="list" @row-click="handelRowClick">
                <el-table-column label="ID" width="55" align="center" prop="id" />
                <el-table-column label="标题" width="200" align="left" prop="messageTitle" :show-overflow-tooltip="true" />
                <el-table-column label="内容" prop="messageText" :show-overflow-tooltip="true" />
                <el-table-column label="状态" width="80" align="center">
                  <template slot-scope="{row}">
                    <el-tag :type="row.messageStatus | statusFilter" @click="handelTagClick(row)">
                      {{ row.messageStatus | statusLabelFilter}}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :lg="8">
        <div class="chart-wrapper">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>链接导航</span>
            </div>
            <div class="component-item">
              <el-collapse value="0" accordion>
                <el-collapse-item v-for="(value,key,index) in linkList" :title="key" :name="index+''">
                  <el-row>
                    <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 8}" :xl="{span: 8}" v-for="link in value">
                      <el-tag style="margin-top: 5px;">
                        <el-link type="success" :href="link.linkUrl" target="_blank">{{link.linkName}}</el-link>
                      </el-tag>
                    </el-col>
                  </el-row>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <el-dialog :title="title" width="45%" :visible.sync="dialogGrantOuttime">
      <el-table :data="form">
        <el-table-column label="类型" width="80" align="center" prop="grantType">
          <template slot-scope="{row}">
            {{ grantStatus[row.grantType] || row.grantType}}
          </template>
        </el-table-column>
        <el-table-column label="一级授权方" align="center" prop="grant1.name">
          <template slot-scope="scope1">
            <el-popover trigger="hover" placement="top">
              <p>授权方: {{ scope1.row.grant1.name }}</p>
              <p>产品名称: {{ scope1.row.grant1.productName }}</p>
              <p>开始时间: {{parseTime(scope1.row.startTime,'{y}-{m}-{d}')}}</p>
              <p>结束时间: {{parseTime(scope1.row.endTime,'{y}-{m}-{d}')}}</p>
              <p>授权书: <el-link v-for="file in JSON.parse(scope1.row.grant1.fileAuth)" :href="file.url" target="_blank"
                  :key="index1">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <p>商标证书: <el-link v-for="file in JSON.parse(scope1.row.grant1.fileTrademark)" :href="file.url" target="_blank"
                  :key="index1">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium" v-if="scope1.row.grant1.outtime" type="danger">{{ scope1.row.grant1.name }}</el-tag>
                <el-tag size="medium" v-else>{{ scope1.row.grant1.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="二级授权方" align="center" prop="grant2.name">
          <template slot-scope="scope2">
            <el-popover trigger="hover" placement="top" v-if="scope2.row.grant2!=null">
              <p>授权方: {{ scope2.row.grant2.name }}</p>
              <p>产品名称: {{ scope2.row.grant2.productName }}</p>
              <p>开始时间: {{parseTime(scope2.row.startTime,'{y}-{m}-{d}')}}</p>
              <p>结束时间: {{parseTime(scope2.row.endTime,'{y}-{m}-{d}')}}</p>
              <p>授权书: <el-link v-for="file in JSON.parse(scope2.row.grant2.fileAuth)" :href="file.url" target="_blank"
                  :key="index2">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <p>商标证书: <el-link v-for="file in JSON.parse(scope2.row.grant2.fileTrademark)" :href="file.url" target="_blank"
                  :key="index2">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <div slot="reference" class="name-wrapper">
                <el-tag type="danger" size="medium" v-if="scope2.row.grant2.outtime">{{ scope2.row.grant2.name }}</el-tag>
                <el-tag type="success" size="medium" v-else>{{ scope2.row.grant2.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="三级授权方" align="center" prop="grant3.name">
          <template slot-scope="scope3">
            <el-popover trigger="hover" placement="top" v-if="scope3.row.grant3!=null">
              <p>授权方: {{ scope3.row.grant3.name }}</p>
              <p>产品名称: {{ scope3.row.grant3.productName }}</p>
              <p>开始时间: {{parseTime(scope3.row.startTime,'{y}-{m}-{d}')}}</p>
              <p>结束时间: {{parseTime(scope3.row.endTime,'{y}-{m}-{d}')}}</p>
              <p>授权书: <el-link v-for="file in JSON.parse(scope3.row.grant3.fileAuth)" :href="file.url" target="_blank"
                  :key="index3">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <p>商标证书: <el-link v-for="file in JSON.parse(scope3.row.grant3.fileTrademark)" :href="file.url" target="_blank"
                  :key="index3">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium" v-if="scope3.row.grant3.outtime" type="danger">{{ scope3.row.grant3.name }}</el-tag>
                <el-tag size="medium" v-else>{{ scope3.row.grant3.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="被授权方" align="center" prop="grant4.name" :show-overflow-tooltip="true">
          <template slot-scope="scope4">
            <el-popover trigger="hover" placement="top" v-if="scope4.row.grant4!=null">
              <p>被授权方: {{ scope4.row.grant4.name }}</p>
              <p>产品名称: {{ scope4.row.grant4.productName }}</p>
              <p>开始时间: {{parseTime(scope4.row.startTime,'{y}-{m}-{d}')}}</p>
              <p>结束时间: {{parseTime(scope4.row.endTime,'{y}-{m}-{d}')}}</p>
              <p>授权书: <el-link v-for="file in JSON.parse(scope4.row.grant4.fileAuth)" :href="file.url" target="_blank"
                  :key="index4">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <p>商标证书: <el-link v-for="file in JSON.parse(scope4.row.grant4.fileTrademark)" :href="file.url" target="_blank"
                  :key="index4">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <div slot="reference" class="name-wrapper">
                <el-tag type="danger" size="medium" v-if="scope4.row.grant4.outtime">{{ scope4.row.grant4.name }}</el-tag>
                <el-tag type="success" size="medium" v-else>{{ scope4.row.grant4.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" align="center" prop="grant4.productName" :show-overflow-tooltip="true" />
        <el-table-column label="开始时间" align="center" prop="startTime" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.startTime,'{y}-{m}-{d}')}}</span>
          </template>
        </el-table-column>
        <el-table-column label="截止时间" align="center" prop="endTime" width="100">
          <template slot-scope="scope1">
            <el-tag type="danger" size="medium" v-if="scope1.row.grant4.outtime">{{ parseTime(scope1.row.endTime,'{y}-{m}-{d}')}}</el-tag>
            <span v-else>{{ parseTime(scope1.row.endTime,'{y}-{m}-{d}')}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog :title="title" width="45%" :visible.sync="dialogGrantOutrage">
      <el-table :data="form">
        <el-table-column label="类型" width="80" align="center" prop="grantType">
          <template slot-scope="{row}">
            {{ grantStatus[row.grantType] || row.grantType}}
          </template>
        </el-table-column>
        <el-table-column label="一级授权方" align="center" prop="grant1.name">
          <template slot-scope="scope1">
            <el-popover trigger="hover" placement="top">
              <p>授权方: {{ scope1.row.grant1.name }}</p>
              <p>产品名称: {{ scope1.row.grant1.productName }}</p>
              <p>开始时间: {{parseTime(scope1.row.startTime,'{y}-{m}-{d}')}}</p>
              <p>结束时间: {{parseTime(scope1.row.endTime,'{y}-{m}-{d}')}}</p>
              <p>授权书: <el-link v-for="file in JSON.parse(scope1.row.grant1.fileAuth)" :href="file.url" target="_blank">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <p>商标证书: <el-link v-for="file in JSON.parse(scope1.row.grant1.fileTrademark)" :href="file.url" target="_blank">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium" v-if="scope1.row.grant1.outrage" type="danger">{{ scope1.row.grant1.name }}</el-tag>
                <el-tag size="medium" v-else>{{ scope1.row.grant1.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="二级授权方" align="center" prop="grant2.name">
          <template slot-scope="scope2">
            <el-popover trigger="hover" placement="top" v-if="scope2.row.grant2!=null">
              <p>授权方: {{ scope2.row.grant2.name }}</p>
              <p>产品名称: {{ scope2.row.grant2.productName }}</p>
              <p>开始时间: {{parseTime(scope2.row.startTime,'{y}-{m}-{d}')}}</p>
              <p>结束时间: {{parseTime(scope2.row.endTime,'{y}-{m}-{d}')}}</p>
              <p>授权书: <el-link v-for="file in JSON.parse(scope2.row.grant2.fileAuth)" :href="file.url" target="_blank">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <p>商标证书: <el-link v-for="file in JSON.parse(scope2.row.grant2.fileTrademark)" :href="file.url" target="_blank">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <div slot="reference" class="name-wrapper">
                <el-tag type="danger" size="medium" v-if="scope2.row.grant2.outrage">{{ scope2.row.grant2.name }}</el-tag>
                <el-tag type="success" size="medium" v-else>{{ scope2.row.grant2.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="三级授权方" align="center" prop="grant3.name">
          <template slot-scope="scope3">
            <el-popover trigger="hover" placement="top" v-if="scope3.row.grant3!=null">
              <p>授权方: {{ scope3.row.grant3.name }}</p>
              <p>产品名称: {{ scope3.row.grant3.productName }}</p>
              <p>开始时间: {{parseTime(scope3.row.startTime,'{y}-{m}-{d}')}}</p>
              <p>结束时间: {{parseTime(scope3.row.endTime,'{y}-{m}-{d}')}}</p>
              <p>授权书: <el-link v-for="file in JSON.parse(scope3.row.grant3.fileAuth)" :href="file.url" target="_blank">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <p>商标证书: <el-link v-for="file in JSON.parse(scope3.row.grant3.fileTrademark)" :href="file.url" target="_blank">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium" v-if="scope3.row.grant3.outrage" type="danger">{{ scope3.row.grant3.name }}</el-tag>
                <el-tag size="medium" v-else>{{ scope3.row.grant3.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="被授权方" align="center" prop="grant4.name" :show-overflow-tooltip="true">
          <template slot-scope="scope4">
            <el-popover trigger="hover" placement="top" v-if="scope4.row.grant4!=null">
              <p>被授权方: {{ scope4.row.grant4.name }}</p>
              <p>产品名称: {{ scope4.row.grant4.productName }}</p>
              <p>开始时间: {{parseTime(scope4.row.startTime,'{y}-{m}-{d}')}}</p>
              <p>结束时间: {{parseTime(scope4.row.endTime,'{y}-{m}-{d}')}}</p>
              <p>授权书: <el-link v-for="file in JSON.parse(scope4.row.grant4.fileAuth)" :href="file.url" target="_blank">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <p>商标证书: <el-link v-for="file in JSON.parse(scope4.row.grant4.fileTrademark)" :href="file.url" target="_blank">
                  <el-tag size="mini">{{file.name}}</el-tag>
                </el-link>
              </p>
              <div slot="reference" class="name-wrapper">
                <el-tag type="danger" size="medium" v-if="scope4.row.grant4.outrage">{{ scope4.row.grant4.name }}</el-tag>
                <el-tag type="success" size="medium" v-else>{{ scope4.row.grant4.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" align="center" prop="grant4.productName" :show-overflow-tooltip="true" />
        <el-table-column label="开始时间" align="center" prop="startTime" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.startTime,'{y}-{m}-{d}')}}</span>
          </template>
        </el-table-column>
        <el-table-column label="截止时间" align="center" prop="endTime" width="100">
          <template slot-scope="scope1">
            <span>{{ parseTime(scope1.row.endTime,'{y}-{m}-{d}')}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listMsgByUser,
    editMsgHaveRead
  } from '@/api/admin/msg'
  import {
    searchLink
  } from '@/api/monitor/nav'
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          0: 'danger',
          1: 'success'
        }
        return statusMap[status] || 'warning';
      },
      statusLabelFilter(status) {
        const statusMap = {
          0: '未读',
          1: '已读'
        }
        return statusMap[status] || status;
      }
    },
    data() {
      return {
        title: '',
        list: null,
        //链接数组
        linkList: [],
        form: {},
        dialogGrantOuttime: false,
        dialogGrantOutrage: false,
        grantStatus: ['一级授权', '二级授权', '三级授权']
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        listMsgByUser({
          current: 1,
          size: 10
        }).then(response => {
          this.list = response.data || [];
        });
        searchLink({}).then(response => {
          if (response.code === 0) {
            this.linkList = {};
            let tmp = response.data || [];
            for (let i in tmp) {
              let _link_type = tmp[i].linkType || '默认分类';
              let link = this.linkList[_link_type];
              if (link == null) {
                link = [];
                this.linkList[_link_type] = link;
              }
              link.push(tmp[i]);
            }
          }
        });
      },
      handelTagClick(row) {
        if (row.messageStatus === 0) {
          editMsgHaveRead(row.id).then(response => {
            this.fetchData();
          });
        }
      },
      handelRowClick(row, column, cell, event) {
        switch (row.extend1) {
          case '0':
            break;
          case '1':
            this.title = '授权预警';
            this.form = JSON.parse(row.extend2 || '[]')
            this.dialogGrantOuttime = true;
            break;
          case '2':
            this.title = '授权超期';
            this.form = JSON.parse(row.extend2 || '[]')
            this.dialogGrantOutrage = true;
            break;
        }
        this.handelTagClick(row);
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      width: 100%;
      background: #fff;
      /*padding: 16px 16px 0;*/
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }

  .el-card {
    min-width: 100%;
    height: 100%;
    margin-right: 20px;
    /*transition: all .5s;*/
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }
</style>
